<template>
  <div>
    <div class="serchTop">
      <el-button>批量删除</el-button>
      <el-input
        v-model="searchText"
        clearable
        style="width: 180px;"
        placeholder="输入关键词"
      >
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </div>
    <div class="leaderBox">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column width="460" label="微信群名称">
          <template slot-scope="scope">
            <div style="padding-left: 20px">{{ scope.row.name }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template>
            <div class="del">删除</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <PageManage
      :pageSize="pageSize"
      :pageNum="pageNum"
      :total="total"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    ></PageManage>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import PageManage from "@/components/PageManage.vue";

@Component({
  components: {
    PageManage,
  },
})
export default class ShowWxList extends Vue {
  /** 搜索内容 */
  searchText = "";

  pageSize = 10;

  pageNum = 1;

  total = 0;

  tableData = [
    {
      name: "微信群",
    },
    {
      name: "微信群",
    },
    {
      name: "微信群",
    },
    {
      name: "微信群",
    },
    {
      name: "微信群",
    },
    {
      name: "微信群",
    },
    {
      name: "王小虎",
    },
  ];

  multipleSelection = [];

  handleSelectionChange(val) {
    this.multipleSelection = val;
  }

  /**
   * @method handleSizeChange
   * @description 每页 条
   */
  handleSizeChange(val) {
    console.log("val", val);
  }

  /**
   * @method handleCurrentChange
   * @description 当前页
   */
  handleCurrentChange(val) {
    console.log("val", val);
  }
}
</script>

<style lang="scss" scoped>
.serchTop {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.leaderBox {
  height: 300px;
  overflow: auto;
  border: 1px solid #d4d4d4;
  margin-top: 20px;
  &__line {
    display: flex;
    align-items: center;
  }
}

.leaderBox::-webkit-scrollbar {
  display: none;
}

.del {
  color: #2d8cf0;
  cursor: pointer;
  padding-left: 20px;
}
</style>
